<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.keyword" placeholder="关键字" style="width: 250px;" class="filter-item" clearable @keyup.enter.native="searchList" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="searchList">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-edit" @click="edit">
        新增优惠券
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期" align="center">
        <template slot-scope="{row}">
          <span>{{ row.day }}天</span>
        </template>
      </el-table-column>
      <el-table-column label="最小满减额度" align="center">
        <template slot-scope="{row}">
          <span>¥{{ row.minTotal||0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="优惠额度" align="center">
        <template slot-scope="{row}">
          <span>¥{{ row.discount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.type | typeFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="edit(row)">
            编辑
          </el-button>
          <el-button size="mini" type="success" @click="provide(row)">
            发放
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :limit.sync="listQuery.pageSize"
      :page.sync="listQuery.pageIndex"
      @pagination="getList"
    />

    <dialog-edit ref="editcoupon" :status.sync="status" :coupon="editcoupon" @updateValue="getList" />
    <dialog-provide ref="provide" :coupon="editcoupon" />
  </div>
</template>

<script>
import { getCoupon } from '@/api/coupon'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import waves from '@/directive/waves' // waves directive
import dialogEdit from './components/dialogEdit'
import dialogProvide from './components/dialogProvide'

import { renderTime } from '@/utils/util'
// import { phoneReg, mailReg } from '@/utils/validate.js'

// 总订单状态：1 全场满减 2 单品满减
const typeOption = [
  { index: 1, value: '全场满减' },
  { index: 2, value: '单品满减' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = typeOption.reduce((acc, cur) => {
  acc[cur.index] = cur.value
  return acc
}, {})

export default {
  name: 'Orders',
  components: { Pagination, dialogEdit, dialogProvide },
  filters: {
    typeFilter(index) {
      return calendarTypeKeyValue[index]
    }
  },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: [],
      listQuery: {
        keyword: '',
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      listLoading: true,
      status: '',
      couponId: '',
      editcoupon: undefined
    }
  },
  created() {
    this.getList()
  },
  methods: {
    renderTime,
    getList() {
      this.listLoading = true
      getCoupon(this.listQuery).then(response => {
        this.list = response.result.list
        this.total = response.result.total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.pageIndex = 1
      this.getList()
    },
    edit(row) {
      this.editcoupon = row.gid ? row : undefined
      this.status = row.gid ? 'edit' : 'add'
      this.$refs.editcoupon.dialogFormVisible = true
    },
    provide(row) {
      this.editcoupon = row.gid ? row : undefined
      this.$refs.provide.dialogFormVisible = true
    }
  }
}
</script>
<style lang="scss">

</style>
